<template>
  <view class="body-view">
    <!-- 使用scroll-view实现tabs滑动切换 -->
    <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
      <view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)">
        <view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
          <text class="menu-topic-text">{{item.name}}</text>
          <view class="menu-topic-bottom">
            <view class="menu-topic-bottom-color"></view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 内容 -->
    <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
      <swiper-item class="swiper-topic-list">
        <view class="swiper-item" v-if="tabCurrent == 'tabNum1'">
          卡券
        </view>
        <view class="swiper-item" v-if="tabCurrent == 'tabNum2'">
          <view class="tea-pay-app" style="background: #FFFFFF;">
            <view class="pay" style="background-color: white;padding:20upx;">
              <view class="money">
                <view style="font-weight: bold;margin-left: 15upx;margin-top: 35upx;border-bottom: 1px solid #d8dbe6;padding-bottom: 10rpx">充值门店</view>
                <view class="recharge">
                  <view>
                    <picker @change="selectChange" :range="teaHouseNameList">
                      <label class="select-teahouse">{{ selectDefaultText }}</label>
                    </picker>
                  </view>
                </view>

                <view style="font-weight: bold;margin-left: 15upx;margin-top: 46upx;border-bottom: 1px solid #d8dbe6;padding-bottom: 10rpx" v-if="teaHouseId">充值规格</view>
                <view class="recharge" v-if="teaHouseId">
                  <view class="recharge-item" :class="{selected:(item.rechargeGiveId==rechargeGiveId)}" v-for="(item,itemKey) in rechargeGiveList" @click="itemClick(item)"
                        :key="itemKey">
                    <view style="margin: auto">
                      <view class="recharge-item-sub1">
                        {{(item.minMoney + item.giveMoney)/100}}元
                      </view>
                      <view class="recharge-item-sub2">
                        售价{{item.minMoney/100}}元
                      </view>
                    </view>
                  </view>
                </view>
                <view class="money" style="font-weight: bold;margin-left: 15upx;margin-top: 30upx;display: none">
                  <view>其他金额</view>
                  <input type="number" v-model="money" style="margin:20upx;padding:20upx;border:1upx solid #eee;background-color: white;" />
                </view>
              </view>
            </view>

            <view v-if="other" class="pay" style="background: #FFFFFF;padding:20upx;"></view>
            <view class="submit-button" style="margin-top: 30rpx" @click="toPay">
              去支付
            </view>

            <view style="padding: 30upx;background: #FFFFFF">
              <view style="font-weight: bold;padding: 30upx 0 10upx 0;">备注：</view>充值金额可用于包间及产品消费。
          </view>
        </view>
        <view class="swiper-item" v-if="tabCurrent == 'tabNum3'">
          66666
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import util from '@/libs/util.js'
import globalConfig from '../../../config'
const baseHttp = globalConfig.API_HOST
export default {
  data() {
    return {
      selectIndex: 0,
      selectDefaultText: '请选择充值门店',
      baseHttp: baseHttp,
      teaHouseId: 0,
      teaHouseNameList: [],
      teaHouseList: [],
      rechargeGiveList: [],
      other: false,
      wxCode: "",
      money: "",
      rechargeGiveId: 0,
      teaConfig: {
        deposit: "",
        vipMoney: "",
        superVipTimes: "",
        subMemberLimit: "",
        remark: ""
      },
      tabs: [{
        id: 1,
        name: '卡券'
      },
        {
          id: 2,
          name: '充值'
        },
        {
          id: 3,
          name: '我的'
        }
      ],
      currentTab: 0,
      tabCurrent: 'tabNum1',
    }
  },
  onLoad() {
    this.getHouseList();
    this.getRechargeGive();
  },
  methods: {
    swichMenu(id) {
      this.currentTab = id;
      id = id + 1;
      this.tabCurrent = 'tabNum'+ id
      console.log(66666666666666666)
      console.log(id)
      console.log(this.tabCurrent)
      console.log(66666666666666666)
    },
    swiperChange(e) {
      debugger
      let index = e.detail.current
      this.swichMenu(index)
    },
    getWxCode() {
      wx.login({
        success: (res) => {
          if (res.code) {
            this.wxCode = res.code;
            console.log(this.wxCode);
          }
        }
      });
    },
    selectChange(e) {
      this.selectIndex = e.target.value;
      this.teaHouseId = this.teaHouseList[this.selectIndex].teaHouseId;
      this.selectDefaultText = this.teaHouseList[this.selectIndex].name;
      this.getRechargeGive();
    },
    getHouseList() {
      this.$api.post('/teaHouse/queryPage',
          {
            pageNO: 1,
            limit: 100
          }
      ).then((response) => {
        if (response.ret===1) {
          let page = this;
          page.teaHouseNameList = []
          page.teaHouseList = response.data;
          console.log(page.teaHouseList)
          response.data.forEach(function (item) {
            page.teaHouseNameList.push(item.name)
          })

        }
      });
    },
    getRechargeGive() {
      this.$api.post('/weixin/rechargeGive/getByTeaHouseId',
          {
            teaHouseId: this.teaHouseId
          }
      ).then((response) => {
        console.log("getByTeaHouseId")
        if (response.ret===1) {
          this.rechargeGiveList = response.data;
        }

      });
    },
    itemClick(item) {
      this.rechargeGiveId = item.rechargeGiveId;
      this.money = item.minMoney/100;
    },
    toPay() {
      if (!this.teaHouseId) {
        this.$Message.error("请选择充值门店");
        return false;
      }
      wx.login({
        success: (res) => {
          if (res.code) {
            this.wxCode = res.code;

            this.$api.post('/weixin/recharge',
                {
                  code: this.wxCode,
                  teaHouseId: this.teaHouseId,
                  money: this.money*100
                }
            ).then((response) => {
              if (response.ret===1) {
                //console.log(response);
                let json = "{"+response.data+"}";
                json = json.replace(/'/g,'"');
                json = JSON.parse(json);

                uni.requestPayment({
                  provider: 'wxpay',
                  timeStamp: json.timeStamp,
                  nonceStr: json.nonceStr,
                  package: json.package,
                  signType: json.signType,
                  paySign: json.paySign,
                  success:  (res) => {
                    this.$Message.success("支付成功");

                    uni.navigateBack({
                      delta: 1
                    });

                  },
                  fail: function (err) {
                    console.log('fail:' + JSON.stringify(err));
                  }
                });

              } else {
                this.$Message.error(response.msg)
              }
            });
          }
        }
      });

    },
    goPage(url) {
      uni.navigateTo({url: url})
    },
  }
}
</script>

<style scoped lang="scss">
.body-view {
  height: 100vh;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
}

.top-menu-view {
  display: flex;
  position: fixed;
  top: 0rpx;
  left: 0;
  width: 100%;
  background-color: #FFFFFF;
  height: 86rpx;
  line-height: 86rpx;
  border-bottom: 1rpx solid #d8dbe6;

  .menu-topic-view {
    display: inline-block;
    white-space: nowrap;
    height: 86rpx;
    position: relative;
    width: 33%;
    text-align: center;

    .menu-topic-text {
      font-size: 30rpx;
      color: #303133;
      //padding: 10rpx 40rpx;
    }

    // .menu-topic-act {
    // 	margin-left: 30upx;
    // 	margin-right: 10upx;
    // 	position: relative;
    // 	height: 100%;
    // 	display: flex;
    // 	align-items: center;
    // 	justify-content: center;
    // }

    .menu-topic-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;

      .menu-topic-bottom-color {
        width: 40rpx;
        height: 4rpx;
      }
    }

    .menu-topic-act .menu-topic-bottom {
      display: flex;
      justify-content: center;
    }

    .menu-topic-act .menu-topic-bottom-color {
      width: 100%;
      background: #1D2C6D;
    }
  }
}

.swiper-box-list {
  width: 100%;
  padding-top: 120rpx;
  flex:1;
  background-color: #FFFFFF;
  .swiper-topic-list {
    width: 100%;
  }
}

.page-section,.page-body,.tea-manager-app{

}

.select-teahouse{
  text-align: center;
  margin: 20px 10px;
  padding: 20upx 30upx;
  border: 1px solid #eee;
  background-color: white;
  border-radius: 8upx;
}

.recharge {
  margin-top: 30upx;
  .recharge-item {
    display: inline-flex;
    border: 1px solid #707070;
    width: 180upx;
    height: 120upx;
    margin: auto 20upx;
    text-align: center;
    border-radius: 10upx;
    margin-top: 20upx;
    .recharge-item-sub1 {
      width: 180upx;
      font-weight: bold;
    }
    .recharge-item-sub2 {
      width: 180upx;
      font-size: 24upx;
      margin-top: 10upx;
    }
  }

  .selected{
    border: 1px solid #3385FF;
    color: #3385FF;
  }
}

.tea-pay-app{
  background-color: #F5F4F8;

  color:#707070;

  .info-item{
    background-color: white;
    display: flex;
    padding: 37upx;
    font-size:28upx;
    border-bottom: 1upx solid #eee;
    .icon{

    }
    .value{
      margin-left:20upx;
    }
  }

  .info {
    height:217upx;
    text-align: center;
    line-height: 217upx;
    background-color: white;
    margin:30upx 0;
    .money{
      font-weight: bold;
      font-size: 100upx;
    }
  }

  .submit-button{
    font-size:40upx;
    margin:0 auto;
    background-color:#3385FF;
    color:white;
    width:80%;
    height:100upx;
    line-height: 100upx;
    text-align: center;
    border-radius: 56upx;
    letter-spacing: 16upx;
  }

}
</style>
